<template>
  <el-card class="card_main">
    <p>试题录入</p>
    <hr />
    <el-form label-width="100px" :model="formData">
      <el-row>
        <el-form-item label="学科">
          <el-select
            v-model="formData.subjectID"
            placeholder=""
            @change="change"
          >
            <el-option
              v-for="item in Qitems"
              :key="item.id"
              :label="item.subjectName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-row>

      <el-row>
        <el-form-item label="目录">
          <el-select v-model="formData.catalogID" placeholder="">
            <el-option
              :value="item.id"
              :label="item.directoryName"
              v-for="item in mulu"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-row>

      <el-row>
        <el-form-item label="企业">
          <el-select v-model="formData.enterpriseID" placeholder="">
            <el-option
              v-for="item in Citems"
              :key="item.id"
              :label="item.company"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-row>

      <el-row>
        <el-form-item label="城市">
          <el-select v-model="formData.city" placeholder="">
            <el-option
              v-for="item in Citems"
              :key="item.id"
              :label="item.city"
              :value="item.city"
            ></el-option>
          </el-select>
          <el-select v-model="formData.province" placeholder="">
            <el-option
              :value="item.province"
              :label="item.province"
              v-for="item in Citems"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-row>

      <el-row>
        <el-form-item label="题型">
          <el-radio-group v-model="formData.questionType">
            <el-radio label="1">单选</el-radio>
            <el-radio label="2">多选</el-radio>
            <el-radio label="3">简答</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-row>

      <el-row>
        <el-form-item label="难度">
          <el-radio-group v-model="formData.difficulty">
            <el-radio label="1">简单</el-radio>
            <el-radio label="2">一般</el-radio>
            <el-radio label="3">困难</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-row>

      <el-row>
        <el-form-item label="题干">
          <VueEditor v-model="formData.question"></VueEditor>
        </el-form-item>
      </el-row>

      <el-row>
        <div v-if="formData.questionType === '1'">
          <el-radio-group v-model="radio">
            <el-form-item label="选项: ">
              <el-radio :label="0"
                >A: &nbsp;<el-input
                  v-model="formData.options[0].title"
                ></el-input></el-radio
              ><el-button style="margin-left: 40px">点击上传</el-button>
            </el-form-item>
            <el-form-item label="选项: ">
              <el-radio :label="1"
                >B: &nbsp;<el-input
                  v-model="formData.options[1].title"
                ></el-input></el-radio
              ><el-button style="margin-left: 40px">点击上传</el-button>
            </el-form-item>
            <el-form-item label="选项: ">
              <el-radio :label="2"
                >C: &nbsp;<el-input
                  v-model="formData.options[2].title"
                ></el-input></el-radio
              ><el-button style="margin-left: 40px">点击上传</el-button>
            </el-form-item>
            <el-form-item label="选项: ">
              <el-radio :label="3"
                >D: &nbsp;<el-input
                  v-model="formData.options[3].title"
                ></el-input></el-radio
              ><el-button style="margin-left: 40px">点击上传</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="danger" :disabled="true"
                >+点击添加选择</el-button
              >
            </el-form-item>
          </el-radio-group>
        </div>

        <div v-if="formData.questionType === '2'">
          <el-checkbox-group v-model="checkList" ref="checkboxid">
            <el-form-item label="选项: ">
              <el-checkbox :label="0"
                >A: &nbsp;<el-input
                  v-model="formData.options[0].title"
                ></el-input></el-checkbox
              ><el-button style="margin-left: 40px">点击上传</el-button>
            </el-form-item>
            <el-form-item label="选项: ">
              <el-checkbox :label="1"
                >B: &nbsp;<el-input
                  v-model="formData.options[1].title"
                ></el-input></el-checkbox
              ><el-button style="margin-left: 40px">点击上传</el-button>
            </el-form-item>
            <el-form-item label="选项: ">
              <el-checkbox :label="2"
                >C: &nbsp;<el-input
                  v-model="formData.options[2].title"
                ></el-input></el-checkbox
              ><el-button style="margin-left: 40px">点击上传</el-button>
            </el-form-item>
            <el-form-item label="选项: ">
              <el-checkbox :label="3"
                >D: &nbsp;<el-input
                  v-model="formData.options[3].title"
                ></el-input></el-checkbox
              ><el-button style="margin-left: 40px">点击上传</el-button>
            </el-form-item>
            <el-form-item label="选项: " v-if="xinzheng">
              <el-checkbox :label="4"
                >E: &nbsp;<el-input
                  v-model="formData.options[4].title"
                ></el-input></el-checkbox
              ><el-button style="margin-left: 40px">点击上传</el-button>
            </el-form-item>
          </el-checkbox-group>
          <el-form-item>
            <el-button type="danger" @click="xinzheng = true"
              >+点击添加选择</el-button
            >
          </el-form-item>
        </div>

        <div v-if="formData.questionType === '3'"></div>
      </el-row>

      <el-row>
        <el-form-item label="解析视频">
          <el-input
            v-model="formData.videoURL"
            placeholder=""
            style="width: 300px"
          ></el-input>
        </el-form-item>
      </el-row>

      <el-row>
        <el-form-item label="答案解析">
          <VueEditor v-model="formData.answer"></VueEditor>
        </el-form-item>
      </el-row>

      <el-row>
        <el-form-item label="题目备注">
          <el-input
            v-model="formData.remarks"
            placeholder=""
            :rows="2"
            type="textarea"
            style="width: 300px"
          ></el-input>
        </el-form-item>
      </el-row>

      <el-row>
        <el-form-item label="题目标签">
          <el-select placeholder="" v-model="formData.tags">
            <el-option
              :label="item.tagNname"
              :value="item.tagName"
              v-for="item in biaoqian"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-row>

      <el-row>
        <el-button type="primary" style="margin-left: 100px" @click="addOk"
          >确认提交</el-button
        >
      </el-row>
    </el-form>
  </el-card>
</template>

<script>
import {
  getsubjectstagsApi,
  getcompanystagsApi,
  gettagslistApi,
  getdirectoryslistApi,
  addquestionsApi,
} from "@/api/lvweijie/questions";
import { updataListAPI } from "@/api/lvweijie/list";
export default {
  name: "NewPage",
  data() {
    return {
      formData: {
        direction: "互联网金融",
        options: [
          { code: "A", title: "", img: "", isRight: 0 },
          { code: "B", title: "", img: "", isRight: 0 },
          { code: "C", title: "", img: "", isRight: 0 },
          { code: "D", title: "", img: "", isRight: 0 },
          { code: "E", title: "", img: "", isRight: 0 },
        ],
      },
      Qitems: [],
      Citems: [],
      mulu: [],
      xinzheng: false,
      biaoqian: [],
      id: this.$route.query.id,
      showvideo: "",
      radio: "",
      checkList: [],
    };
  },
  created() {
    this.initData();
  },
  methods: {
    async initData() {
      if (this.id) {
        let arr = await updataListAPI(this.id);
        this.formData = arr;
        let arr1 = arr.options.sort(function (a, b) {
          return a.id - b.id;
        });
        this.formData.options = arr1;
        let index = arr1.findIndex((item) => item.isRight === 1);
        this.radio = index;
        arr1.forEach((val, index1) => {
          if (val.isRight === 1) {
            this.checkList.push(index1);
          }
        });
        let { items } = await getsubjectstagsApi();
        this.Qitems = items;
        let res = await getcompanystagsApi();
        this.Citems = res.items;
        let res2 = await getdirectoryslistApi(this.formData.subjectID);
        this.mulu = res2.items;
        let res1 = await gettagslistApi(this.formData.subjectID);
        this.biaoqian = res1.items;
      } else {
        let { items } = await getsubjectstagsApi();
        this.Qitems = items;
        let res = await getcompanystagsApi();
        this.Citems = res.items;
      }
    },
    async change() {
      let { items } = await getdirectoryslistApi(this.formData.subjectID);
      this.mulu = items;
      let res = await gettagslistApi(this.formData.subjectID);
      this.biaoqian = res.items;
    },
    async addOk() {
      if (this.formData.questionType === "1") {
        this.formData.options[this.radio].isRight = 1;
      } else if (this.formData.questionType === "2") {
        this.formData.options.forEach((val, index) => {
          this.checkList.forEach((item) => {
            if (item === index) {
              val.isRight = 1;
            }
          });
        });
        this.checkList = [];
      } else {
        console.log('测试');
      }
      let res = await addquestionsApi(this.formData);
      this.$message.success("新增成功");
      this.$router.push({
        path: "/questions/list",
        query: {
          id: res.id,
        },
      });
    },
  },
};
</script>

<style lang="less">
.card_main {
  padding: 20px;
}
.elradio {
  margin-top: 15px;
}
</style>
